﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="CurrData.Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>Index </title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

    <link href="/js/kd/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="/js/kd/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <link href="/js/fa/css/font-awesome.min.css" rel="stylesheet" />
    <link href="/js/site.css?t=20221031" rel="stylesheet" />

    <script src="/js/kd/jquery.min.js"></script>
    <script src="/js/kd/kendo.web.min.js"></script>
    <script src="/js/kd/kendo.aspnetmvc.min.js"></script>
    <script src="/js/kd/cultures/kendo.culture.zh-CN.min.js"></script>
    <script src="/js/kd/messages/kendo.messages.zh-CN.min.js"></script>
    <script src="/js/kd/jszip.min.js"></script>


    <script src="/js/kendo_stdefine.js?t=1"></script>
    <script src="/js/site50.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>


</head>
<body>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            color: rgb(101, 173, 235);
            font-size: 12px;
            background-color: rgba( 13,20,84,1);
        }

        textarea {
            height: 60px !important;
        }

        .tdLabel75 {
            padding: 5px;
        }

        @media screen and (max-width: 1400px) {
            body, html {
                font-size: 10px;
            }
        }

        .flexcol {
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .flexrow {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bgfull {
            background-size: 100% 100%;
        }

        :root {
            --var_color_B: rgb(11,203,237)
        }

        .colorB {
            color: var(--var_color_B);
        }

        .bgB {
            background-color: var(--var_color_B);
        }

        .myBtn {
            cursor: pointer;
            pointer-events: all;
        }

            .myBtn:hover {
                animation: myBtnScale 1s ease-in-out infinite alternate;
            }


        @keyframes myBtnScale {
            from {
                scale: 1;
            }

            to {
                scale: 1.2;
            }
        }
    </style>
    <style>
        .k-window {
            background-image: url(/img/windowbg.png) !important;
            background-size: 100% 100%;
            padding: 5px;
        }

        .k-window-content {
            overflow-y: auto;
        }

        .k-window-titlebar {
            background: linear-gradient(135deg, rgba(30, 144, 255, 0.8), rgba(0, 0, 139, 0.8)) !important;
            margin-top: -30px !important;
        }

        .k-window-iframecontent {
            height: calc(100% - 5px);
        }

        .k-window-actions {
            top: 8px !important;
        }
    </style>

    <style>
        body {
        }

        a.k-pager-refresh.k-link {
            display: block;
        }

        .k-splitter {
            position: absolute;
            left: 5px;
            top: 5px;
            width: calc(100% - 12px);
            height: calc(100% - 12px);
        }

        .k-splitbar-horizontal {
            width: 0px !important;
        }

        .tdValue {
            flex: 1;
        }

        i {
            cursor: pointer;
        }
    </style>

    <div id="divSplitter" data-role="splitter"
         data-panes="[
                { collapsible: false, resizable: false,  size: '245px' },
                { collapsible: false, resizable: false }
             ]"
         style="">
        <div id="left-pane" style="overflow:hidden;overflow-y:auto;">
            <div id="toolbarCenter" style="height:40px;line-height:40px;margin-bottom:2px;border-bottom: 1px solid #23549C;background:#14346a;font-family:'Microsoft YaHei'" class="flexrow">

                <div style="flex:1;">
                    <ul data-role="buttongroup"
                        data-index="2"
                        data-bind="  events: { select: buttongroup_Select }">

                        <li>协议</li>
                        <li>模拟</li>
                        <li>日志</li>

                    </ul>
                </div>
                <div style="width:20px;color:#5999D4;">

                </div>
                <div style="width:20px;color:#5999D4;">

                </div>
                <div style="width:20px;color:#5999D4;">
                </div>




            </div>
            <div id="listView"></div>

            <div id="treeview"
                 data-role="treeview"
                 data-drag-and-drop="false"
                 data-text-field="text"
                 data-id-field="id"
                 data-spritecssclass-field="imageurl"
                 data-bind="source: treeData,
                    events: { change: treeNodeChange }"
                 style="flex-wrap: wrap;overflow-x:hidden;overflow-y:auto ;height:calc( 100% - 45px)">

            </div>


        </div>

        <div id="center" style="overflow: hidden;overflow-y:auto; ">

            <div id="grid" style="height: calc(100% -  5px)"></div>

        </div>


    </div>



    <script>
        function myAjax(options) {
            if (options.win == undefined) {
                options.win = myGetTop();
            }
            if (options.async == undefined) options.async = true;
            if (!options.timeout) options.timeout = 30000;
            if (options.contentType == undefined) options.contentType = "application/json";
            if (options.type == undefined) options.type = "POST";
            if (options.contentType == "application/json") {
                if (typeof (options.data) != "string") {
                    options.data = JSON.stringify(options.data);
                }
            }
            if (options.Alert == undefined) options.Alert = true;
            var opt = {
                before: function () {
                    kendo.ui.progress($("body"), true);

                },
                after: function () {
                    kendo.ui.progress($("body"), false);
                },
                timeout: options.timeout,
                contentType: options.contentType,
                type: options.type,
                dataType: 'json',
                async: options.async,
                cache: false,
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    opt2.after();
                    if (options.Alert) {
                        if (textStatus == "timeout") {
                            myAlert("请求超时");
                        }
                        else {
                            myAlert('错误.:' + textStatus + " " + errorThrown);
                        }
                    }
                    else {
                        opt2.err({ C: "-1", M: "" + textStatus + " " + errorThrown });
                    }

                },
                err: function (r) {
                    myAlert('错误:' + r.Message);
                }
            }
            var opt2 = $.extend(true, {}, opt, options);
            opt2.success = function (r) {
                opt2.after();

                if (r.Code == "" || r.C == "") {
                    if (options.success) {
                        options.success(r);
                    }
                }
                else {
                    opt2.err(r);
                }
            }
            opt2.before();
            options.win.$.ajax(opt2);
        }
        myAjaxList = function (opt) {
            var oldsuccess = opt.success;
            opt.success = (r) => {
                for (var i = 0; i < r.Data.length; i++) {
                    r.Data[i].RowNo = i + 1;
                }
                oldsuccess(r);
            }
            myAjax(opt);
        }

        function newDataSource(opt) {
            //jq
            //getParam
            //url
            var pageSize = 20;
            if (opt.pageSize) {
                pageSize = opt.pageSize;
            }
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        if (opt.getParam) {
                            opt.getParam(options.data);
                        }
                        var data = options.data;
                        myAjax({
                            url: opt.url,
                            data: data,
                            before: function () {
                                if (opt.opt) {
                                    kendo.ui.progress(obj.jq, true);
                                }
                            },
                            after: function () {
                                if (opt.opt) {
                                    kendo.ui.progress(obj.jq, true);
                                }
                            },
                            success: function (result) {
                                for (var i = 0; i < result.Data.Data.length; i++) {
                                    var o = result.Data.Data[i]
                                    o.RowNo = (data["page"] - 1) * data["pageSize"] + i + 1;
                                }
                                // notify the data source that the request succeeded
                                options.success(result.Data);
                            },
                            error: function (result) {
                                // notify the data source that the request failed
                                options.error(result);
                            }
                        });
                    }
                },
                batch: false,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: true }

                        }
                    },
                    data: "Data",
                    total: "Total",
                },
                pageSize: pageSize
            });

            return dataSource;
        }

        function isBitString(input) {
            // 使用正则表达式判断字符串是否只包含0和1
            return /^[01]+$/.test(input);
        }
        function isByteString(input) {
            // 使用正则表达式判断字符串是否是1到3位数字，且值在0-255之间
            return /^\d{1,3}$/.test(input) && parseInt(input) >= 0 && parseInt(input) <= 255;
        }
        function isUInt16String(input) {
            // 使用正则表达式判断字符串是否是1到5位数字，且值在0-65535之间
            return /^\d{1,5}$/.test(input) && parseInt(input) >= 0 && parseInt(input) <= 65535;
        }
        function isIntString(input) {
            // 使用正则表达式判断字符串是否是整数（可包含正负号）
            return /^[-+]?\d+$/.test(input);
        }
        function isFloatString(input) {
            // 使用正则表达式判断字符串是否是浮点数（可包含正负号和小数点）
            return /^[-+]?\d*\.?\d+$/.test(input);
        }





    </script>
    <style>
        .lb_product2 {
            margin: 10px;
            line-height: 25px;
            border-bottom: 1px dashed #143c75;
            cursor: pointer;
        }

            .lb_product2:hover:not(.k-state-selected) {
                background: #18477f80 !important;
            }

        .k-listview {
            border: none;
        }

        .divtitle {
            height: 30px;
            background: #18477f80 !important;
            margin-top: 5px;
        }
    </style>

    <script type="text/x-kendo-template" id="detailTemplate">

    </script>
    <script>
        var viewModel = new kendo.data.ObservableObject({

            buttongroup_Select: function (e) {
                var buttonGroup = e.sender;
                var index = buttonGroup.current().index();
                switch (index) {
                    case 0:
                        var url = "/index.html";
                        break;
                    case 1:
                        var url = "/indexsim.html";
                        break;
                    case 2:
                        var url = "/indexlog.html";
                        break;
                }
                window.location.href = url;
            },
            treeNodeChange: function (e) {
                var treeView = $("#treeview").data("kendoTreeView");
                var nodedata = treeView.dataItem(treeView.select());
                if (!nodedata) {
                    $("#btnAdd").show();
                    $("#btnDelete").hide();
                    return;
                }



                Page();
            },
            treeData: [],

        });
        var gridBaseOption = {
            autoBind: false,
            navigatable: true,
            pageable: false,
            editable: false,
            messages: $.extend(true, {}, KDGridmessages),
            sortable: true,
            selectable: "row",
            filterable: false,
        };


        var CurrData = {};
        function Init() {

            var opt = Object.assign({}, gridBaseOption);

            opt.columns = [

                { title: '序号', field: "RowNo", width: 50, sortable: false, filterable: false, },
                { title: '时间', field: "Dt", width: 80, sortable: false, filterable: false, },
                { title: '机号', field: "ProtocolSimHostName", width: 80, sortable: false, filterable: false, },
                { title: '类型', field: "Lx", width: 50, sortable: false, filterable: false, },
                { title: '数据', field: "Data", width: 300, sortable: false, filterable: false, },
                { title: '备注', field: "Memo", width: 150, sortable: false, filterable: false, },
            ]
            opt.pageable = $.extend(true, {}, KDGridpageable)
            opt.toolbar = kendo.template($("#cmd-template").html());

            grid = $("#grid").kendoGrid(opt).data("kendoGrid");

            kendo.bind($("#divSplitter"), viewModel);



            // 获取当前时间并格式化为 yyyy-MM-dd HH:00:00
            var now = new Date();
            var formattedTime = now.getFullYear() + '-' +
                ('0' + (now.getMonth() + 1)).slice(-2) + '-' +
                ('0' + now.getDate()).slice(-2) + ' ' +
                ('0' + now.getHours()).slice(-2) + ':00:00';
            $("#Dtb").data("kendoDateTimePicker").value(formattedTime);

            GetTree("");
 
        }

        function GetTree(selid) {
           
            var tv = $("#treeview").data("kendoTreeView");

            myAjax({
                url: "/api/ProtocolSim/Tree",
                success: function (r) {

                    var ohy = kendo.observableHierarchy({
                        data: r.Data
                    });

                    viewModel.set("treeData", ohy);

                    if (selid) {

                        var di = tv.dataSource.get(selid);
                        var bar = tv.findByUid(di.uid);
                        tv.select(bar);
                    } else if (r.Data.length > 0) {
                        var selectedNode = tv.findByText(r.Data[0].text);
                        tv.select(selectedNode);
                    }

                }
            });
        };

        function Page() {
            var treeView = $("#treeview").data("kendoTreeView");
            var nodedata = treeView.dataItem(treeView.select());
          

            var dataSource = newDataSource({
                jq: $("#grid"),
                url: "/api/ProtocolSimLog/Page",
                getParam: function (data) {
                    var treeView = $("#treeview").data("kendoTreeView");
                    var nodedata = treeView.dataItem(treeView.select());

                    if (nodedata.attrs2 == "A") {
                        data.ProtocolSimId = nodedata.id;
                    } else {
                        data.ProtocolSimHostId = nodedata.id;
                    }
                    data.Key = $("#Key").val();
                    data.dtb = $("#Dtb").data("kendoDateTimePicker").value();
                    data.dte = $("#Dte").data("kendoDateTimePicker").value();
                },
                pageSize: 20,
                page: 1,
            })


            grid.setDataSource(dataSource);
            dataSource.read();
        }


        function closeWindow(sender) {
            var win = $(sender).closest(".k-window-content");
            win.data("kendoWindow").close();
        }
        function updown_Click(sender) {
            var obj = $(sender);
            var p = obj.closest(".divtitle");

            if (obj.hasClass("fa-chevron-up")) {
                obj.removeClass("fa-chevron-up");
                obj.addClass("fa-chevron-down");
                var nextElement = p[0].nextElementSibling; // 获取p的同级下一个元素

                $(nextElement).toggle();
            } else {
                obj.removeClass("fa-chevron-down");
                obj.addClass("fa-chevron-up");
                var nextElement = p[0].nextElementSibling; // 获取p的同级下一个元素
                $(nextElement).toggle();
            }
        }





    </script>






    <script id="cmd-template" type="text/x-kendo-template">
             <div id="divTop" style="height:30px; padding:5px;  " class="flexrow">

                 <div style="width:60px;padding-top:5px;padding-right:10px;text-align:right;">
                     <label style="">数据时间</label>
                 </div>
                 <div style="width:200px;">
                     <input id="Dtb" data-role="datetimepicker" data-format="yyyy-MM-dd HH:mm" style="width:200px;" data-value="" />
                 </div>
                 <div style="width:10px;padding-top:5px;padding-right:10px;text-align:right;">
                     <label style="">~</label>
                 </div>
                 <div style="width:200px;">
                     <input id="Dte" data-role="datetimepicker" data-format="yyyy-MM-dd  HH:mm" style="width:200px;" />
                 </div>


        <div style="width:60px;padding-top:5px;padding-right:10px;text-align:right;">
            <label style="">关键字</label>
        </div>

              <div style="width:200px;">
                  <input id="Key" Name="Key" class="k-textbox" placeholder="备注关键字"/>
              </div>


                 <div style="width:20px;">
             </div>

                   <div style="width:90px;">
                     <a style="width:80px;" onclick='Page();' class='k-button '><span class='k-icon k-i-search'></span>查询</a>
                 </div>

                 <div style="width:90px;text-align:right;">
                     <a class='k-button k-space-left k-grid-excel'><span class='k-icon k-i-excel'></span>导出</a>
                 </div>
                  <div style="flex:1;">
                  </div>
                  <div style="width:20px;">

                  </div>
             </div>
    </script>











    <script>
        var SizeInfo;
        $(function () {

            kendo.culture("zh-CN");


            if (window.Init) {
                Init();
            }
        });
        function After50(d) {
            if (d) {
                setTimeout(function () { d(); }, 50);
            }
        }
    </script>
</body>
</html>
